<template>
  <div class="command__wrapper_container" v-show="visible">
    <el-container>
      <el-header :height="'45'">
        <svg-icon icon-class="table"></svg-icon>
        研判报警
        <span class="el-icon-circle-close" @click="handleCloseDialog"></span>
      </el-header>
      <el-main>
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="预警信息" prop="alarmMessage" style="width: 38%">
            <el-input  style="width: 140px"
              v-model="queryParams.alarmMessage"
              placeholder="请输入查询内容"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="类型" prop="alarmType" style="width: 33%">
            <el-select v-model="queryParams.alarmType" placeholder="请选择类型" clearable size="small" style="width: 115px">
              <el-option
                v-for="dict in judgeAlarmTypeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item  style="width: 29%">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="judgeList">
          <el-table-column label="主建id" align="center" prop="id" v-if="false"/>
          <el-table-column label="定位" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-location-information"
                @click="showPoint(scope.row)"
                v-hasPermi="['basicInformation:appUser:point']"
              >定位
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="预警等级" align="center" prop="alarmLevelName" width="100"/>
          <el-table-column label="预警时间" align="center" prop="alarmTime" width="180">
          </el-table-column>
          <el-table-column label="预警类型" align="center" prop="alarmType" :formatter="judgeAlarmTypeFormat"/>
          <el-table-column label="预警信息" align="center" prop="alarmMessage"/>
          <el-table-column label="异常人员姓名" align="center" prop="name"/>
          <el-table-column label="异常人员身份证号" align="center" prop="idcard" width="180"/>
          <el-table-column label="详情" align="center" prop="name">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-document"
                @click="showEvt(scope.row)"
              >详情
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="下派" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-location-information"
                @click="handleSave(scope.row)"
              >下派
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          small
          layout="total,prev, pager, next"
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-main>
    </el-container>
    <el-dialog :visible="dialogVisible" title="预览" class="imgss" height="800" z-index="20">
      <viewer :images="imgs">
        <img v-for="src in imgs" :key="src.url" :src="src.url">
      </viewer>
    </el-dialog>
  </div>
</template>


<script>

  import { listForMap } from '../../../api/basicInformation/judgeAlarm'

  import Vue from 'vue'
  import Viewer from 'v-viewer'
  import 'viewerjs/dist/viewer.css'

  Vue.use(Viewer)
  Viewer.setDefaults({
    Options: {
      'inline': false,
      'button': true,
      'navbar': true,
      'title': true,
      'toolbar': true,
      'tooltip': true,
      'movable': true,
      'zoomable': true,
      'rotatable': true,
      'scalable': true,
      'transition': true,
      'fullscreen': true,
      'keyboard': true,
      'url': 'data-source',
      'zIndexInline': 9999
    }
  })
  export default {
    name: 'Mission',
    components: {},
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        style: null,
        style2: null,
        dialogVisible: false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 巡护任务表格数据
        judgeList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          content: undefined,
          alarmType: undefined,
          issue: 0,
          orderByColumn: 'alarmTime',
          isAsc: 'desc'
        },
        // 表单参数
        form: {},
        imgs: [],
        judgeAlarmTypeOptions: []
      }
    },
    created() {
      this.getList()
      this.getDicts('judge_alarm_type').then(response => {
        this.judgeAlarmTypeOptions = response.data
      })
    },
    methods: {
      handleOpenDialog() {
      },
      handleCloseDialog() {
        this.$emit('close')
      },
      showImage(row) {
        this.imgs = []
        if (row.photo) {
          this.imgs.push({
            url: row.photo,
            title: row.name
          })
          this.dialogVisible = true
        }
      },
      /** 查询巡护任务列表 */
      getList() {
        this.loading = false
        listForMap(this.queryParams).then(response => {
          this.judgeList = response.rows
          this.total = response.total
          this.showJudgeNum(this.total)
          this.loading = false
        })
      },
      judgeAlarmTypeFormat(row) {
        return this.selectDictLabel(this.judgeAlarmTypeOptions, row.alarmType)
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      },
      showJudgeNum(e) {
        this.$emit('showJudgeNum', e)
      },
      showPoint(row) {
        this.$emit('showJudgePoint', row)
      },
      showEvt(e) {
        const detail = {}
        detail.target = 'judge'
        detail.item = e
        this.$emit('ShowDetail', detail)
      },
      handleSave(e) {
        e.evtSource = '2'
        this.$emit('runHelp', e)
      }
    }
  }
</script>
<style scoped lang="scss">
  @import '../style/main';

  .el-form-item {
    margin-bottom: 10px;
    margin-right: 0;
  }
  .imgss img {
    width: 250px !important;
    height: 250px !important;
    /*float: left;*/
  }
  ::v-deep .el-form-item .el-select .el-input{
    width: inherit !important;
  }
</style>
